<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>任务1</title>
    <style>
      html {
        /* Setting a base font size of 10px give us easier rem calculations
     Info: 1rem === 10px, 1.5rem === 15px, 2rem === 20px and so forth
   */
        font-size: 10px;
      }

      body {
        /* Native font stack https://getbootstrap.com/docs/4.2/content/reboot/#native-font-stack */
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
          "Helvetica Neue", Arial, sans-serif;
        font-size: 1.6rem;
        line-height: 1.5;
        text-align: center;
        color: #333;
        margin: 0;
      }

      h1 {
        font-size: 4rem;
        margin-bottom: 0;
      }

      @media (max-width: 460px) {
        h1 {
          font-size: 3.5rem;
          line-height: 1.2;
        }
      }

      h2 {
        font-size: 3.25rem;
      }

      a {
        color: #477ca7;
      }

      a:visited {
        color: #74638f;
      }

      #main {
        margin: 30px 8px;
        padding: 15px;
        border-radius: 5px;
        background: #eee;
      }

      @media (max-width: 460px) {
        #main {
          margin: 0;
        }
      }

      img {
        max-width: 100%;
        display: block;
        height: auto;
        margin: 0 auto;
      }

      #img-div {
        background: white;
        padding: 10px;
        margin: 0;
      }

      #img-caption {
        margin: 15px 0 5px 0;
      }

      @media (max-width: 460px) {
        #img-caption {
          font-size: 1.4rem;
        }
      }

      #headline {
        margin: 50px 0;
        text-align: center;
      }

      ul {
        max-width: 550px;
        margin: 0 auto 50px auto;
        text-align: left;
        line-height: 1.6;
      }

      li {
        margin: 16px 0;
      }

      blockquote {
        font-style: italic;
        max-width: 545px;
        margin: 0 auto 50px auto;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <main id="main">
      <h1 id="title">Dr. Norman Borlaug</h1>
      <figure id="img-div">
        <img
          id="image"
          src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"
        />
        <figcaption id="img-caption">
          The man who saved a billion lives
        </figcaption>
        <section id="tribute-info">
          <h3>Here's a time line of Dr. Borlaug's life:</h3>
          <ul>
            <li>1914 - Born in Cresco, Iowa</li>
          </ul>
        </section>
        <a
          href="https://fanyi.baidu.com/#en/zh/"
          id="tribute-link"
          target="_blank"
          >百度翻译</a
        >
      </figure>
    </main>
  </body>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>
